<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>

<div id="page-content">
    <div class="panel">

        <div id="demo-carousel" class="carousel slide" data-ride="carousel">

            <!--Indicators-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <ol class="carousel-indicators out">
                <li class="active" data-slide-to="0" data-target="#demo-carousel"></li>
                <li data-slide-to="1" data-target="#demo-carousel"></li>
                <li data-slide-to="2" data-target="#demo-carousel"></li>
            </ol>
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

            <div class="carousel-inner text-center">

                <!--Item 1-->
                <div class="item active">
                    <h4 class="text-main">First slide label</h4>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>

                <!--Item 2-->
                <div class="item">
                    <h4 class="text-main">Second slide label</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>

                <!--Item 3-->
                <div class="item">
                    <h4 class="text-main">Third slide label</h4>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>

            <!--carousel-control-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <a class="carousel-control left" data-slide="prev" href="#demo-carousel"><i class="pli-arrow-left icon-2x"></i></a>
            <a class="carousel-control right" data-slide="next" href="#demo-carousel"><i class="pli-arrow-right icon-2x"></i></a>
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

        </div>
        <!--===================================================-->
        <!--End Carousel-->


    </div>
</div>

</body>
</html>